<template>
    <div class="bannerConponent">
        <!-- pc端显示：hidden-sm-and-down -->
        <div class="bannerVue_2 hidden-sm-and-down mg0">
            <div class="banner_inner mg0  flex-column align-center">
                <div class="flex-center">
                    <img src="../assets/logo.png" style="width: 100px; height: 100px;">
                    <span style="color: #FF3B61; font-size: 80px; padding-left: 20px;">衣勾选</span>
                </div>
                <div style="color: #1D2129; font-weight: 600; padding: 80px 0; font-size: 58px;">您的空中试衣间～</div>
                <div class="content"> 衣勾选是集潮流购物、AI试衣、同城配送、分享社区于一体的智能化服饰平台，涵盖女装、男装、童装、老年装等全品类服饰。同城39分钟送货上门，免费试穿，满意再付款。AI试衣技术实时预览上身效果，告别退货烦恼。穿搭分享社区汇聚时尚达人，获取搭配灵感。厂家源头商品平价来袭，平台直营店铺售后保障。衣勾选，一站式搭配购物新体验!</div>
            </div>
        </div>
        <div class="appDownLoad_2 flex-between hidden-sm-and-down mg50">
            <div class="ios flex-center align-center relative" @click="toDownloadios">
                <img src="../assets/ios.png" style="width: 78px; height: 78px;">
                <span style="font-size: 38px; color: #fff; padding-left: 4px;">下载iOS版</span>
                <div class="code absolute">
                    <img src="../assets/code.png" style="width: 100%; height: 100%;">
                </div>
            </div>
            <div class="android flex-center align-center relative" @click="toDownloadandroid">
                <img src="../assets/android.png" style="width: 78px; height: 78px;">
                <span style="font-size: 38px; color: #fff; padding-left: 4px;">下载Android版</span>
                <div class="code absolute">
                    <img src="../assets/code_1.png" style="width: 100%; height: 100%;">
                </div>
            </div>
        </div>


        <!-- 移动端显示：hidden-md-and-up -->
        <div class="bannerVue_1 flex-column align-center hidden-md-and-up">
            <img src="../assets/logo.png" style="width: 40px; height: 40px;">
            <div style="color: #1D2129; font-weight: 600; padding: 15px 0; font-size: 16px;">您的空中试衣间～</div>
            <div class="content">衣勾选是集潮流购物、AI试衣、同城配送、分享社区于一体的智能化服饰平台，涵盖女装、男装、童装、老年装等全品类服饰。同城39分钟送货上门，免费试穿，满意再付款。</div>
            <div class="content">AI试衣技术实时预览上身效果，告别退货烦恼。穿搭分享社区汇聚时尚达人，获取搭配灵感。厂家源头商品平价来袭，平台直营店铺售后保障。衣勾选，一站式搭配购物新体验!</div>
        </div>

        <div class="appDownLoad_1 flex-between hidden-md-and-up">
            <div class="ios flex-center align-center" @click="toDownloadios">
                <img src="../assets/ios.png" style="width: 24px; height: 24px;">
                <span style="font-size: 14px; color: #fff; padding-left: 4px;">下载iOS版</span>
            </div>
            <div class="android flex-center align-center" @click="toDownloadandroid">
                <img src="../assets/android.png" style="width: 24px; height: 24px;">
                <span style="font-size: 14px; color: #fff; padding-left: 4px;">下载Android版</span>
            </div>
        </div>

        <div class="mask" v-if="show" @click.stop="show=false">
            <div class="contentVue">
                <div class="flex-end" style="line-height: 0;">
                    <span class="el-icon-caret-top" style="color: #1D2129; font-size: 40px; margin-right: -8px;"></span>
                </div>
                <div class="inner">微信中不支持下载安装包，请用默认浏览器打开下载</div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            show: false
        }
    },
    methods: {
        isWeChatBrowser() {
            var ua = navigator.userAgent.toLowerCase();
            return ua.indexOf('micromessenger') !== -1;
        },
        
        toDownloadios(){
            console.log("是否是微信浏览器", this.isWeChatBrowser())
            console.log(this.isWeChatBrowser())
            if(this.isWeChatBrowser()) return this.show = true
            const url = "https://apps.apple.com/cn/app/6744016367"
            // 获取用户代理信息(不考虑代理信息被伪装的情况)
            var userAgent = (navigator.userAgent || navigator.vendor || window.opera) || 'Unknown';
            console.log(userAgent)
            // 检查是否是iPhone或iPad
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                // 如果是移动设备，则重定向页面
                window.location.href = url;
            } else {
                // 否则，在新窗口打开链接
                window.open(url);
            }
        },


        toDownloadandroid(){
            console.log("是否是微信浏览器", this.isWeChatBrowser())
            if(this.isWeChatBrowser()) return this.show = true
            const url = "https://cos.yigouxuan.com/project-ygx/resource/ygx.apk"
            // 获取用户代理信息(不考虑代理信息被伪装的情况)
            var userAgent = (navigator.userAgent || navigator.vendor || window.opera) || 'Unknown';
            console.log(userAgent)
            // 检查是否是iPhone或iPad
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                // 如果是移动设备，则重定向页面
                window.location.href = url;
            } else {
                // 否则，在新窗口打开链接
                window.open(url);
            } 
        }
    }
}
</script>

<style lang="less">
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        .contentVue {
            width: 100%;
            padding: 0 15px;
            .inner {
                width: 100%;
                height: 50px;
                background: #1D2129;
                border-radius: 20px 0 20px 20px;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin-top: -16px;
            }
        }
    }
    .bannerConponent {
        width: 100%;
        .bannerVue_1 {
            width: 100%;
            background: url("../assets//banner_1.png") no-repeat;
            background-size: 100% 100%;
            padding:  68px 18px 68px;
            .content {
                color: #4E5969;
                line-height: 1.6;
                text-indent: 2em;
            }
        }
        .bannerVue_2 {
            width: 100%;
            height: 1024px;
            background: url("../assets//banner_1.png") no-repeat;
            background-size: 100% 100%;
            .banner_inner {
                width: 1300px;
                height: 1024px;
                padding: 200px 0px 0;
                .content {
                    color: #4E5969;
                    line-height: 1.6;
                    text-indent: 2em;
                    font-size: 40px;
                }
            }
        }
        .appDownLoad_1 {
            padding: 10px 18px 0;
            .ios,.android {
                width: 48%;
                height: 52px;
                border-radius: 30px;
            }
            .ios {
                background: #1D2129;
            }
            .android {
                background: #83CB6F;
            }
        }
        .appDownLoad_2 {
            width: 1300px;
            height: 140px;
            padding: 0 100px;
            .ios,.android {
                width: 520px;
                height: 140px;
                border-radius: 100px;
                cursor: pointer;
            }
            .ios {
                background: #1D2129;
                .code {
                    visibility: hidden;
                }
            }
            .android {
                background: #83CB6F;
                .code {
                    visibility: hidden;
                }
            }
            .ios:hover {
                .code {
                    width: 546px;
                    height: 554px;
                    visibility: visible;
                    left: -23px;
                    top: -500px;
                }
               
            }
            .android:hover {
                    .code {
                        width: 546px;
                        height: 554px;
                        visibility: visible;
                        left: -23px;
                        top: -500px;
                    }
                }
        }
    }
</style>